<template>
  <div class="main-container">
    <header class="main-header">
      <div class="header-left">
        <h2>图书管理系统</h2>
      </div>
      <div class="header-right">
        <span>欢迎，{{ userStore.username }}</span>
        <el-button type="text" @click="$router.push('/profile')">个人资料</el-button>
        <el-button type="text" @click="handleLogout">退出登录</el-button>
      </div>
    </header>
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    userStore.logout()
    ElMessage.success('退出成功')
    router.push('/login')
  } catch (error) {
    // 用户取消
  }
}
</script>

<style scoped>
.header-left h2 {
  margin: 0;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-right span {
  color: #666;
}
</style> 